<template>
  <view 
    class="mental-health-checkup-entry"
    :style="[{backgroundImage:'url('+staticImgs.boxBg+')'},sty]"
    @click="toCheckup"
  >

  </view>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {sclExaminationEshopReport} from '@/common/api/scl_api'

  export default {
    props:{
      sourceType:{
        type:[String,Number],
        default:'17'
      },
      sty:{},
      boxBg: {
        type: String,
        default: ''
      }
    },
    data(){
      return {
        staticImgs:{
          boxBg: this.boxBg || this.imgBaseURL + '/scl/checkup-sexuality/entery-box-v3.png',
        },
        loading: false
      }
    },
    computed: {
      ...mapGetters('user', ['isEshopUser'])
    },
    methods:{
      toCheckup(){
        if (this.isEshopUser) {
          if (this.loading) {
            return
          }
          this.loading = true
          sclExaminationEshopReport({
            sclTotalCode: 'scl_sexual_orientation'
          }).then(res => {
            if (res.data.data?.sclId && res.data.data?.reportId) {
              uni.redirectTo({
                url: '/subcontractorB/pages/sclResult/sclResult?id=' +
                    res.data.data.reportId +
                    '&sclReportType=3'
              })
            } else {
              uni.navigateTo({
                url:'/subcontractorC/pages/sexuality-assessment/index?sourceType=' + this.sourceType
              })
            }
          }).finally(() => this.loading = false)
        } else {
          uni.navigateTo({
            url:'/subcontractorC/pages/sexuality-assessment/index?sourceType=' + this.sourceType
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.mental-health-checkup-entry{
  width: 720rpx;
  height: 210rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  
  overflow: hidden;
  margin: auto;
  // margin-bottom: -30rpx;
  
  // margin-top: -18rpx;
  //margin-bottom: -18rpx;
  position: relative;

}
</style>